<!DOCTYPE html><head><meta charset="utf-8"><title>line-height 测试</title><style>.percent {
    width: 50%;
    font-size: 16px;
    line-height: 120%;
}

.percent h1 {
    font-size: 32px;
}

.percent p {
    font-size: 16px;
}

.percent #footer {
    font-size: 12px
}

.value {
    width: 50%;
    font-size: 16px;
    line-height: 30px;
}

.value h1 {
    font-size: 32px;
}

.value p {
    font-size: 16px;
}

.value #footer {
    font-size: 12px
}

.normal {
    width: 50%;
    font-size: 40px;
    line-height: normal;
}

.normal h1 {
    font-size: 20px;
}

.normal p {
    font-size: 16px;
}

.normal #footer {
    font-size: 12px;
}

.coefficient {
    width: 50%;
    font-size: 40px;
    line-height: 1.5;
}

.coefficient h1 {
    font-size: 32px;
}

.coefficient p {
    font-size: 16px;
}

.coefficient #footer {
    font-size: 12px
}

.test {
    border: 2px solid grey;
    line-height: 3;
}

.test em {
    font-size: 30px;
}

.test input{
    font-size: 20px;
    line-height: 0;
}
.test span{
    font-size: 20px;
    line-height: 0;
}
</style></head><body><a href="../line-height.md">line-height 讲解</a><div class="percent"><h2><strong>line-height 百分比</strong></h2><h1>font-size 32px</h1><p>font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。</p><div id="footer">12px<a>font-size</a></div></div><div class="value"><h2><strong>line-height 固定值</strong></h2><h1>font-size 32px</h1><p>font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。</p><div id="footer">12px<a>font-size</a></div></div><div class="normal"><h2><strong>line-height normal 约为1.2</strong></h2><h1>font-size 20px</h1><p>font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。</p><div id="footer">12px<a>font-size</a></div></div><div class="coefficient"><h2><strong>line-height 1.5</strong></h2><h1>font-size 32px</h1><p>font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。</p><div id="footer">12px<a>font-size</a></div></div><div class="test">test <em>for line-height</em></div><div class="test"><input typ="text" value="测试line-height"></div><div class="test"><div class="test"><span>test</span></div></div><div class="test"><div class="test"><input value="test"></div></div><br><br><br><br></body>